<template>
    <div class="app">
        <h2>{{msg}}，收到的学生名：{{studentName}}</h2>
        <School :getSchoolName="getSchoolName"></School>

        <!-- 第一种绑定组件自定义事件 在组件上绑定原生dom事件不能只写click等，会被当做自定义事件，需要加.native修饰-->
        <Student v-on:atguigu="getStudentName" @demo="demo" @click.native="show"></Student>
        <!--第一种写法 可以简写-->
        <!-- <Student @atguigu="getStudentName"></Student> -->
        <!-- 第一种写法，可以用事件修饰符-->
        <!-- <Student @atguigu.once="getStudentName"></Student> -->
        <!---第二种写法 通过ref和$on绑定-->
        <!-- <Student ref="stu" ></Student> -->
    </div>
</template>

<script>
//引入School组件
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
    name: 'App',
    components: {
        Student,
        School,
    },
    data() {
        return {
            msg: '大标题',
            studentName: ''
        }
    },
    methods: {
        //用prop传递函数实现子组件传数据给父组件
        getSchoolName(name) {
            console.log('app收了学校名', name)
        },

        getStudentName(name, ...args) {
            console.log('app收了学生名', name, args)
            this.studentName = name
        },

        demo() {
            console.log('demo事件触发了')
        },
        show() {
            console.log('原生click事件')
        }
    },
    mounted() {
        //另一种绑定自定义事件的方法，通过ref获取子组件vc，调用vc的$on函数绑定自定义事件
        // this.$refs.stu.$on('atguigu', this.getStudentName)
        // this.$refs.stu.$once('atguigu', this.getStudentName) //绑定一次性自定义事件
    }
}
</script>

<style lang="css">
    /* style还有一个属性lang，表示样式的语言，默认的是css，此外vue也支持less样式 */
    .app {
        background-color: gray;
        padding: 5px;
    }
    /*app组件中的样式不建议用scoped，因为app组件的样式可能在全局使用 */
</style>